import Icon from '@tarojs/components/dist-h5/vue3/components/icon'
import Image from '@tarojs/components/dist-h5/vue3/components/image'
import ScrollView from '@tarojs/components/dist-h5/vue3/components/scroll-view'
import Text from '@tarojs/components/dist-h5/vue3/components/text'
import createComponent from '@tarojs/components/dist-h5/vue3/createComponent'
import createFormsComponent from '@tarojs/components/dist-h5/vue3/createFormsComponent'

// formsComponent
const Input = createFormsComponent('taro-input', 'input')
const Textarea = createFormsComponent('taro-textarea', 'input')
const Picker = createFormsComponent('taro-picker', 'change')
const Switch = createFormsComponent('taro-switch', 'change', 'checked')
const Slider = createFormsComponent('taro-slider', 'change', 'value', [
  'weui-slider-box'
])

// simpleComponents
const View = createComponent('taro-view')
const RichText = createComponent('taro-rich-text')
const Button = createComponent('taro-button')
const CheckboxGroup = createComponent('taro-checkbox-group')
const Editor = createComponent('taro-editor')
const Form = createComponent('taro-form')
const Label = createComponent('taro-label')
const PickerView = createComponent('taro-picker-view')
const PickerViewColumn = createComponent('taro-picker-view-column')
const CoverImage = createComponent('taro-cover-image')
const CoverView = createComponent('taro-cover-view')
const MoveableArea = createComponent('taro-moveable-area')
const MoveableView = createComponent('taro-moveable-view')
const Swiper = createComponent('taro-swiper')
const FunctionalPageNavigator = createComponent(
  'taro-functional-page-navigator'
)
const Navigator = createComponent('taro-navigator')
const Audio = createComponent('taro-audio')
const Camera = createComponent('taro-camera')
const LivePlayer = createComponent('taro-live-player')
const Map = createComponent('taro-map')
const Ad = createComponent('taro-ad')
const OfficialAccount = createComponent('taro-official-account')
const OpenData = createComponent('taro-open-data')
const WebView = createComponent('taro-web-view')
const NavigationBar = createComponent('taro-navigation-bar')
const Block = createComponent('taro-block')
const Canvas = createComponent('taro-canvas')
const CustomWrapper = createComponent('taro-custom-wrapper')
const Checkbox = createComponent('taro-checkbox', ['weui-cells_checkbox'])
const Progress = createComponent('taro-progress', ['weui-progress'])
const RadioGroup = createComponent('taro-radio-group', [
  'weui-cells_radiogroup'
])
const Radio = createComponent('taro-radio', ['weui-cells_checkbox'])
const SwiperItem = createComponent('taro-swiper-item', ['swiper-slide'])
const Video = createComponent('taro-video', ['taro-video-container'])

export function initVue3Components(app) {
  app.config.compilerOptions.isCustomElement = function (tag) {
    return /^taro-/.test(tag) || tag === 'root' || tag === 'block'
  }

  app.component('taro-input', Input)
  app.component('taro-textarea', Textarea)
  app.component('taro-switch', Switch)
  app.component('taro-slider', Slider)
  app.component('taro-text', Text)
  app.component('taro-picker', Picker)
  app.component('taro-image', Image)
  app.component('taro-icon', Icon)
  app.component('taro-scroll-view', ScrollView)
  app.component('taro-view', View)
  app.component('taro-rich-text', RichText)
  app.component('taro-button', Button)
  app.component('taro-checkbox-group', CheckboxGroup)
  app.component('taro-editor', Editor)
  app.component('taro-form', Form)
  app.component('taro-label', Label)
  app.component('taro-picker-view', PickerView)
  app.component('taro-picker-view-column', PickerViewColumn)
  app.component('taro-cover-image', CoverImage)
  app.component('taro-cover-view', CoverView)
  app.component('taro-moveable-area', MoveableArea)
  app.component('taro-moveable-view', MoveableView)
  app.component('taro-swiper', Swiper)
  app.component('taro-functional-page-navigator', FunctionalPageNavigator)
  app.component('taro-navigator', Navigator)
  app.component('taro-audio', Audio)
  app.component('taro-camera', Camera)
  app.component('taro-live-player', LivePlayer)
  app.component('taro-map', Map)
  app.component('taro-ad', Ad)
  app.component('taro-official-account', OfficialAccount)
  app.component('taro-open-data', OpenData)
  app.component('taro-web-view', WebView)
  app.component('taro-navigation-bar', NavigationBar)
  app.component('taro-block', Block)
  app.component('taro-canvas', Canvas)
  app.component('taro-custom-wrapper', CustomWrapper)
  app.component('taro-checkbox', Checkbox)
  app.component('taro-progress', Progress)
  app.component('taro-radio-group', RadioGroup)
  app.component('taro-radio', Radio)
  app.component('taro-swiper-item', SwiperItem)
  app.component('taro-video', Video)
}

export {
  Ad,
  Audio,
  Block,
  Button,
  Camera,
  Canvas,
  Checkbox,
  CheckboxGroup,
  CoverImage,
  CoverView,
  CustomWrapper,
  Editor,
  Form,
  FunctionalPageNavigator,
  Icon,
  Image,
  // formsComponent
  Input,
  Label,
  LivePlayer,
  Map,
  MoveableArea,
  MoveableView,
  NavigationBar,
  Navigator,
  OfficialAccount,
  OpenData,
  Picker,
  PickerView,
  PickerViewColumn,
  Progress,
  Radio,
  RadioGroup,
  RichText,
  ScrollView,
  Slider,
  Swiper,
  SwiperItem,
  Switch,
  Text,
  Textarea,
  Video,
  // simpleComponents
  View,
  WebView
}
